<template>
	<view>
		<u-navbar back-text="返回" title="个人信息修改"></u-navbar>
		<view class="content">
			<u-cell-group>
				<u-cell-item title="更换手机号" :arrow="false" value="157***32" @click="updatePhone"></u-cell-item>
				<u-cell-item title="修改密码" @click="updateInfo"></u-cell-item>
			</u-cell-group>
		</view>
		
		
		<u-mask :show="showForm" @click="showForm = false" :duration="400" :zoom="true"
		    :custom-style="{background: 'rgba(0, 0, 0, 0.5)'}">
		    <view class="warp">
				<u-form :model="form" ref="uForm">
						<u-form-item label="姓名">
							<u-input v-model="form.name" :type="type" :border="border" trim/>
							</u-form-item>
						<u-form-item label="手机号">
							<u-input v-model="form.phone" :type="type" :border="border" trim/>
						</u-form-item>
					</u-form>
			</view>
		</u-mask>
		<u-mask :show="showCode" @click="showCode = false" :duration="400" :zoom="true"
		    :custom-style="{background: 'rgba(0, 0, 0, 0.5)'}">
		    <view class="warp">
		        <view class="rect" @tap.stop>
		            <view class="input-container">
		                <u-message-input :maxlength="5" :focus="focus" :disabled-keyboard="true" :breathe="true"
		                    @change="change" @finish="finish" :value="value"></u-message-input>
		                <u-keyboard ref="uKeyboard" mode="number" v-model="focus" :mask="false"
		                    @change="valChange" @backspace="backspace" :confirm-btn="false"></u-keyboard>
		            </view>
		        </view>
		    </view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCode: false,
				showForm:false,
				focus: true,
				form:{
					name:'',
					phone:''
				},
				value: '',
				type:'text'
			}
		},
		onReady(){
			this.focus=true
		},
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
			updateInfo() {
				this.showForm = true;
			},
			updatePhone() {
				this.showCode = true;
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				console.log(this.value);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				console.log(this.value);
			}
		}
	}
</script>

<style>
	.u-mask {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	/* 容器样式 */
	.warp {
	    background: #fff;
	    border-radius: 10px;
	    padding: 20px;
	    width: 90%;
	    max-width: 500px;
	}
	
	/* 弹框内容区域样式 */
	.rect {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	
	/* 输入框和键盘容器样式 */
	.input-container {
	    margin-top: 20px;
	    width: 100%;
	}
</style>